<template>
  <!--全局卡片-->
  <el-card class="box-card">
    <div slot="header" class="clearfix">

      <!--上方表单-->
      <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="searchForm.projectName" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="资源类型" style="margin-left: 200px">
          <el-select v-model="searchForm.resourceType" placeholder="请选择资源类型" @change="handleChange">
            <el-option label="全部项目类型" :value="0"></el-option>
            <el-option label="图片" :value="1"></el-option>
            <el-option label="视频" :value="2"></el-option>
            <el-option label="图纸" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 280px" size="mini">
          <el-button class="search" type="primary" @click="search" icon="el-icon-search">查询</el-button>
          <el-button class="reset" @click="resetForm('searchForm')" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
        <el-form-item label="资源名称">
          <el-input v-model="searchForm.resourceName" placeholder="请输入资源名称"></el-input>
        </el-form-item>
        <br>
        <el-form-item style="margin-left: 1028px" size="mini">
          <el-button class="add" @click="projectAdd('添加项目资源')" type="primary" icon="el-icon-plus">新建</el-button>
          <el-button class="delBatch" @click="handelBatch" type="danger" icon="el-icon-delete-solid">删除</el-button>
        </el-form-item>
      </el-form>

      <hr>

      <!--下方表格-->
      <el-table
        :data="prList"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <!--复选框,默认会有事件handleSelectionChange-->
        <el-table-column
          type="selection"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
        >
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="resourceId"
          label="资源ID"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="resourceName"
          label="资源名称"
        >
        </el-table-column>
        <el-table-column
          width="250px"
          align="center"
          prop="projectName"
          label="项目名称"
        >
        </el-table-column>
        <el-table-column
          prop="projectType"
          label="项目类型">
          <template slot-scope="scope">
            <el-tag
              :type="getProjectTypeTagType(scope.row.resourceType)"
              disable-transitions>
              {{ getProjectTypeTagName(scope.row.resourceType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="100px"
          align="center"
          prop="projectDepartment"
          label="归属部门"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="remark"
          label="备注"
        >
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              class="edit"
              size="mini"
              @click="projectUpdate('编辑项目资源',scope.row)"
              type="text"
            >编辑
            </el-button>
            <el-button
              class="delById"
              size="mini"
              @click="handleDelete(scope.row)"
              type="text"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5,6,7,8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import {getList, delById, delBatch} from '@/api/pr/resource'
import {title} from "@/settings";

export default {
  data() {
    return {
      searchForm: {
        resourceId: "", // 资源ID
        projectName: "", // 项目名称
        resourceName: "", // 资源名称
        resourceType: "", // 资源类型
      },
      prList: [],
      projectResource: {
        resourceId: "", // 资源ID
        projectName: "", // 项目名称
        resourceName: "", // 资源名称
        resourceType: "", // 资源类型
        projectDepartment:"", // 归属部门
        remark: "", // 备注
      },
      pageNum: 1,
      pageSize: 8,
      total: 0,
      title:''
    }
  },
  methods: {
    // 可以监听 change 事件
    handleChange(value) {
      console.log('Selected resource type:', value);
      // 这里可以添加其他逻辑
    },

    // 复选框改变就默认触发
    handleSelectionChange(val) {
      let ids = []
      for (let i = 0; i < val.length; i++) {
        ids.push(val[i].resourceId)
      }
      this.ids = ids
    },

    // 获取列表数据
    getUnitList() {
      getList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        projectName: this.searchForm.projectName,
        resourceName: this.searchForm.resourceName,
        resourceType: this.searchForm.resourceType,
      }).then(res => {
        if (res.code === 20000) {
          // res.data取出的是pageInfo对象
          this.prList = res.data.list
          this.total = res.data.total
        }
      })
    },

    // 模糊搜索
    search() {
      this.getUnitList()
    },

    // 根据ID删除
    handleDelete(row) {
      this.$confirm('确认删除编号为' + row.resourceId + '的数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        delById({
          resourceId: row.resourceId
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getUnitList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 批量删除
    handelBatch() {
      if (this.ids.length === 0) {
        this.$message.error("没有选择要删除的数据!")
      } else {
        this.$confirm('此操作将永久删除这些数据,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delBatch({
            ids: this.ids.join(",")
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getUnitList()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        })
      }
    },

    // 跳转添加项目资源页面
    projectAdd(title) {
      this.title = '添加项目资源'
      this.$router.push({ name :'/projectAdd' , params:{title}});
    },

    // 编辑项目资源
    projectUpdate(title) {
      this.title = '编辑项目资源'
      this.$router.push({ name :'/projectAdd' , params:{title}});
    },

    // 重置表单
    resetForm(formName) {
      this.searchForm = {
        resourceId: "", // 资源ID
        projectName: "", // 项目名称
        resourceName: "", // 资源名称
        resourceType: "", // 资源类型
      }
      this.getUnitList()
    },

    // 判断项目类型
    getProjectTypeTagType(status) {
      const typeMap = {
        '1': '',
        '2': 'warning',
        '3': 'success'
      };
      return typeMap[status] || ''; // 如果状态不在预期范围内，则返回空字符串
    },
    // 项目类型前端展示
    getProjectTypeTagName(status) {
      const typeMap = {
        '1': '图片',
        '2': '视频',
        '3': '图纸'
      };
      return typeMap[status] || ''; // 如果状态不在预期范围内，则返回空字符串
    },
    //分页
    handleSizeChange(size) {
      this.pageSize = size
      this.getUnitList()
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage
      this.getUnitList()
    },
  },
  created() {
    this.getUnitList()
  },
}
</script>

<style scoped lang="scss">
.add,.search{
  color: #ffffff;
  background-color: #306ecc;
  border-color: #306ecc;
}
.reset{
  color: #185dc6;
  background-color: #ffffff;
  border-color: #185dc6;
}
.delById{
  color: #e10707;
}
.delBatch{
  color: #ffffff;
  background-color: #ee0505;
  border-color: #ff0000;
}
.edit{
  color: #185dc6;
}
</style>
